.markdown-body pre .copy-code-button {
  display: flex;
  align-items: center;
  position: absolute;
  right: 10px;
  top: 1em;
  cursor: pointer;
  padding: 0 5px;
  color: var(--white);
  border: var(--color-border-in-light);
  transform: translateX(10px);
  pointer-events: none;
  opacity: 0;
  transition: all 0.3s ease;
  border-radius: 5px;
  height: 24px;
  width: 24px;
}

.markdown-body pre .hljs-language {
  z-index: 2;
  user-select: none;
  color: #929295;
  font-size: 12px;
  font-weight: 500;
  position: absolute;
  top: 2px;
  right: 8px;
  transition: color 0.4s, opacity 0.4s;
}

.markdown-body pre:hover .copy-code-button {
  pointer-events: all;
  transform: translateX(0);
  opacity: 0.5;
  background-color: var(--black);
}

// Theme: Tokyo-night-Dark
// origin: https://github.com/enkia/tokyo-night-vscode-theme
.markdown-body {
  pre {
    padding: 0;
  }

  pre,
  code {
    font-family: var(--code-font-family);
  }

  pre code {
    display: block;
    overflow-x: auto;
    padding: 1em;
    width: 100%;
  }

  code {
    padding: 3px 5px;
  }

  .hljs,
  pre {
    position: relative;
    background: var(--color-hljs-color);
    color: currentColor;
  }

  .hljs-comment,
  .hljs-meta {
    color: #565f89;
  }

  .hljs-deletion,
  .hljs-doctag,
  .hljs-regexp,
  .hljs-selector-attr,
  .hljs-selector-class,
  .hljs-selector-id,
  .hljs-selector-pseudo,
  .hljs-tag,
  .hljs-template-tag,
  .hljs-variable.language_ {
    color: #f7768e;
  }

  .hljs-link,
  .hljs-literal,
  .hljs-number,
  .hljs-params,
  .hljs-template-variable,
  .hljs-type,
  .hljs-variable {
    color: #ff9e64;
  }

  .hljs-attribute,
  .hljs-built_in {
    color: #e0af68;
  }

  .hljs-keyword,
  .hljs-property,
  .hljs-subst,
  .hljs-title,
  .hljs-title.class_,
  .hljs-title.class_.inherited__,
  .hljs-title.function_ {
    color: #7dcfff;
  }

  .hljs-selector-tag {
    color: #73daca;
  }

  .hljs-addition,
  .hljs-bullet,
  .hljs-quote,
  .hljs-string,
  .hljs-symbol {
    color: #9ece6a;
  }

  .hljs-code,
  .hljs-formula,
  .hljs-section {
    color: #7aa2f7;
  }

  .hljs-attr,
  .hljs-char.escape_,
  .hljs-keyword,
  .hljs-name,
  .hljs-operator {
    color: #bb9af7;
  }

  .hljs-punctuation {
    color: #c0caf5;
  }

  .hljs-emphasis {
    font-style: italic;
  }

  .hljs-strong {
    font-weight: 700;
  }
}

// Shiki 相关样式 
.shiki {
  font-family: var(--code-font-family);
  // 保持行高为初始值，在 shiki 代码块中处理
  line-height: initial;
}
